<template>
    <div>
        <h3><center>请选择科室</center></h3>
<!--        <div  style="float: left;margin-left: 27px" v-for="item in department" :key="item.id">-->
<!--            <router-link :to="{name:'ChooseDoctor',params:{id:item.id}}"><div style="width: 200px;height: 150px;border: 2px solid #409EFF;margin-bottom: 50px;margin-left: 50px;-->
<!--                border-radius: 2px;float: left;text-align: center;"><br>{{ item.name}}</div>-->
<!--            </router-link>-->
<!--        </div>-->
        <h1>
        <div>
            <el-tree :data="data" style="float:left;margin-top: 0px;background-color:#f0f0f0;width: 100%;" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        </h1>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "ChooseDepartment",
        data() {
            return{
                data:{
                    file: {name: '', url: ''},
                    id:'',
                    name:'',
                    children:[{
                        id:'',
                        name:''
                    }]
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                value: '',
                data:[],
            }

        },
        activated(){
            this.create();
        },
        methods:{
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/department/getAllDepartments").then(resp=> {
                    this.data=resp.data.data.list;
                })

            },
            handleNodeClick(data) {
                if(data.children==null){
                    localStorage.setItem('departmentId',data.id);
                    localStorage.setItem('departmentname',data.name);
                    this.$router.push({name:'ChooseDoctor',})
                }
            },
        }

    }
</script>

<style scoped>

</style>